<template>
  <d2-container>
    <template slot="header">Page 2 header</template>
    <div id="myresume">
      <el-upload
        ref="upload"
        class="upload-wrap"
        action="http://upload-z2.qiniup.com"
        :data="token"
        :limit="limit"
        :on-exceed="handleExceed"
        :before-remove="beforeRemove"
        :on-remove="handleRemove"
        :before-upload="beforePdfUpload"
        :on-success="handleSuccess"
        :on-preview="handlePreview"
        :on-error="handleError"
        :file-list="fileList"
        :auto-upload="false"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-select
          v-model="experts"
          filterable
          allow-create
          default-first-option
          size="mini"
          placeholder="选择简历指导的专家"
        >
          <el-option
            v-for="item in expertsList"
            size="mini"
            :key="item.experts_id"
            :label="item.experts_name"
            :value="item.experts_id + '/' + item.user_id"
          ></el-option>
        </el-select>
        <el-button
          style="margin-left: 10px;"
          size="small"
          type="success"
          @click="submitUpload"
          >上传到服务器</el-button
        >
        <div slot="tip" class="el-upload__tip">
          (只能上传xxx.pdf文件，且不超过5MB)
        </div>
      </el-upload>

      <!-- 演示图片 -->
      <div class="srcDemo" v-if="!pdfUrl">
        <p class="srcDemo-txt">如果你的简历是Word格式:</p>
        <img class="scrDemo-img" :src="srcDemo" />
      </div>

      <!-- pdf预览 -->
      <div class="pdf-wrap" style="height: 1200px;">
        <iframe
          v-if="pdfUrl"
          :src="pdfUrl"
          frameborder="0"
          style="width: 100%; height: 100%"
        ></iframe>
      </div>
    </div>
  </d2-container>
</template>

<script>
import util from '@/libs/util.js'
import {
  getExperts,
  getQiniuToken,
  getResumeList,
  addResume,
  sendMessage
} from '@/api/api'
export default {
  name: 'myresume',
  data () {
    return {
      limit: 2,
      srcDemo: 'http://qiniu.careerai.com.cn/CareerAiResume.gif',
      token: {},
      resume_id: '',
      pdfUrl: '',
      pdfList: {},
      fileList: [],
      resumeList: [],
      experts: '',
      expertsList: [],
      expertUserid: '',
      userid: ''
    }
  },
  created () {
    this.userid = util.cookies.get('user_id')
    getQiniuToken().then(res => {
      this.token = { token: res.token }
    })
    this.getList()
  },
  methods: {
    getList () {
      // 获取专家列表
      getExperts()
        .then(res => {
          this.expertsList = res.data
        })
        .catch(() => {})
      // 获取简历列表
      getResumeList({ user_id: this.userid })
        .then(res => {
          this.resumeList = res.data.data
        })
        .catch(() => {
          this.resumeList = []
        })
    },
    // 上传文件
    submitUpload () {
      var expert = this.experts.split('/')[0]
      if (!expert) {
        this.$message.error('指导专家不能为空！')
      } else {
        this.$refs.upload.submit()
      }
    },

    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 ${this.limit} 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    // 移除前提示
    beforeRemove (file, fileList) {
      if (!file.name) {
        return this.$confirm(`确定移除 ${file.name}？`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error',
          center: true
        })
      }
    },
    // 移除时执行的操作
    handleRemove (file, fileList) {
    },
    // 上传前判断文件格式
    beforePdfUpload (file) {
      const isPDF = file.type === 'application/pdf'
      const isLt5M = file.size / 1024 / 1024 < 5

      if (!isPDF) {
        this.$message.error('上传简历只能是 PDF 格式!')
      }
      if (!isLt5M) {
        this.$message.error('上传简历PDF大小不能超过 5MB!')
      }

      return isPDF && isLt5M
    },
    // 上传时执行操作
    handleSuccess (response, file, fileList) {
      var expert = this.experts.split('/')[0]
      const params = {
        file_name: file.name,
        user_Id: this.userid,
        file_url: 'http://qiniu.careerai.com.cn/' + response.key,
        experts_id: expert
      }
      addResume(params)
        .then(res => {
          // 成功时，返回200
          if (res.code === 200) {
            this.$message.success(`简历 ${file.name} 上传成功`)
            this.getList()
            const mess = {
              content: '向您发起了简历指导',
              fromId: this.experts.split('/')[1],
              jumpurl: res.data.resume_id,
              toId: this.userid,
              type: 3
            }
            sendMessage(mess)
              .then(res => {
                if (res.code === 200) {
                  this.$notify({
                    title: '成功',
                    message: '推送消息成功~',
                    type: 'success'
                  })
                } else {
                  this.$toast('推送消息失败', 'error')
                }
              })
          } else {
            this.$toast(res.message, 'error')
          }
        })
      this.pdfUrl = 'http://qiniu.careerai.com.cn/' + response.key
    },
    handlePreview (file) {
      this.pdfUrl = 'http://qiniu.careerai.com.cn/' + file.response.key
      // window.open(file.url)
      // window.open('http://qiniu.careerai.com.cn/' + file.response.key)
    },
    // eslint-disable-next-line handle-callback-err
    handleError (err, file, fileList) {
      this.$message.error(`简历 ${file.name} 上传失败`)
    }
  }
}
</script>

<style lang="scss">
#myresume {
  padding: 15px;
  .upload-wrap {
    margin-top: 10px;
    .pdf-wrap {
      margin-top: 10px;
      .srcDemo-txt {
        margin-top: 10px;
        .scrDemo-img {
          margin-top: 10px;
          width: 1150px;
          padding: 20px;
        }
      }
    }
  }
}

@media (min-width: 1024px) {
  .pdf-wrap {
    padding: 10px 20%;
  }
  .scrDemo-img {
    padding: 10px 20%;
  }
}
</style>
